<template>
	<view>
		
		<uni-popup ref="popup" type="bottom" background-color="#fff" @change="handClose">
			<view class="popup-content" style="height:840rpx">
				<view class="downs" @click="handClose($event,1)">
					<view class="downs-btn"></view>
					<view class="downs-text">出勤人员</view>
				</view>
				<view class="title_groud" >
					{{objs.title || '--'}}<text>(参与考勤：{{counts}}人)</text>
				</view>
				<view class="title_item">
					<view class="itemOne" :style="{ borderBottom: acts == 1 ? '#0091ff 4rpx solid' : 'none' }" @click="tabClick(1)">
						已出勤({{ (objs.workUserNames && objs.workUserNames.length) || 0}})
					</view>
					<view class="itemOne" :style="{ borderBottom: acts == 2 ? '#0091ff 4rpx solid' : 'none' }" @click="tabClick(2)">
						未出勤({{ (objs.planUserNames && objs.planUserNames.length) || 0}})
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 518rpx;" >
					<view class="title_cont">
						<view v-for="(item,index) in changArr" :key="index">
							{{item}}
						</view>
					</view>
				</scroll-view>
				<view class="title_line" style="border-bottom: 2rpx #d8d8d8 solid;"></view>
				<view class="bottoms">
					<!-- <view class="reSet" @click="handClose($event,1)">取消</view> -->
					<view class="submit" @click="handClose($event,1)">关闭</view>
				</view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	
export default {
	name:'signUsers',
	data() {
		return {
			acts: 1,
			changArr: [],
			counts: 0,
			objs: { 
				workUserNames: [],
				planUserNames: []
			},
		};
	},
		
	props:{
		listObj:{
			type:Object,
			default:{}
		}
	},
	watch:{
			 listObj: {
			handler(obj) {
				if (obj) { 
					this.acts = 1;
					this.changArr = obj.workUserNames || [];
					this.counts = (obj.workUserNames || []).length + (obj.planUserNames || []).length;
					this.objs = obj;
				}
			},
			deep:true,
			immediate:true
		}
	},
		
	mounted() {
			
	},
	methods:{
		// 关闭
		handClose(e,type) {
			if (!e.show) {
				this.$emit('handClose',false);
			}
			if (type === 1) {
				this.$emit('handClose',false);
			}
		},
		tabClick(num) {
			this.acts = num;
			this.changArr = this.listObj.workUserNames || [];
			if (num === 2) {
				this.changArr = this.listObj.planUserNames || [];
			}
		}
			
	}
};
</script>

<style lang="scss" scoped>
	.popup-content {
		display: flex;
		flex-direction: column;
		// padding: 30rpx;
		// height: 50px;
		background-color: #fff;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		.picker-view {
			width: 680rpx;
			height: 500rpx;
			margin-top: 20rpx;
			margin: 0 auto;
			
			.item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				position: relative;
				text{
					position: absolute;
					right: 5%;
					margin-top:10rpx;
					display: inline-block;
					width: 52rpx;
					height: 28rpx;
					background: #f3f6f8;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: 400;
					text-align: center;
					color: #0091ff;
					line-height: 28rpx;
				}
			}
			.item {}
			
		}
		.downs {
			// width: 100%;
			margin:20rpx 30rpx;
			.downs-btn {
				width: 64rpx;
				height: 10rpx;
				background: #d8d8d8;
				border-radius: 6rpx;
				margin: 0 auto;
			}
			.downs-text {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
		}
		.title_groud{
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-left: 30rpx;
			text{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}
		.title_item{
			border-bottom: 2rpx #d8ded8 solid;
			display: flex;
			padding-left: 30rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			.itemOne{
				padding-bottom: 10rpx;
				margin-right: 30rpx;
			}
		}
		.title_cont{
			padding: 30rpx;
			view{
				margin-bottom: 30rpx;
			}
		}
		.bottoms {
			display: flex;
			margin-top: 15rpx;
			align-items: center;
			// width: 710rpx;
			height: 98rpx;
			view {
				display: flex;
				height: 70rpx;
				width: 670rpx;
				margin: 0 auto;
				justify-content: center;
				align-items: center;
				border-radius: 8rpx;
				font-size: 28rpx;
			}
			.submit {
				background-color: #0091ff;
				color: #fff;
			}
		}
	}
</style>